<!-- directive:title haoyl::Flex布局 demo -->
<!-- directive:breadcrumb 重点Flex的应用 -->
<div class="panel-body">
    <article class="docs-content">
        <p>布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。</p>
        <p>2009年，W3C提出了一种新的方案—-Flex布局，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
        <p>
            <img src="" alt="">
        </p>
        <p>基本概念 : Flex容器/Flex项目/水平的主轴/垂直的交叉轴</p>
        <p>项目默认沿主轴排列</p>
        <p>============================================</p>
        <p></p>
    </article>
    <div class="row">
        <div class="col-sm-6">
            <style media="screen" ui-bs>
                .box{
                    display: flex;
                    /*display: inline-flex; 行内元素 */
                    display: -webkit-flex; /* Safari */
                    background:#ddd;
                    border:1px solid red;
                }
            </style>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-direction属性决定主轴的方向（即项目的排列方向）</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*容器属性*/
                    flex-direction: row;/*主轴为水平方向，起点在左端。默认值*/
                    flex-direction: row-reverse;/*主轴为水平方向，起点在右端*/
                    flex-direction: column;/*主轴为垂直方向，起点在上沿。*/
                    flex-direction: column-reverse;/*主轴为垂直方向，起点在下沿。*/
                    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
                }
            </script>
            <style media="screen">
                .box11{flex-direction: row;}
                .box12{flex-direction: row-reverse;}
                .box13{flex-direction: column;}
                .box14{flex-direction: column-reverse;}
                .item{width: 50px;height: 50px;}
                .item.red{background: red}
                .item.blue{background: blue}
                .item.yellow{background: yellow}
            </style>
            <div class="row">
                <div class="col-sm-3 box box11">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box12">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box13">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box14">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-wrap 属性决定主轴上的项目是否换行，如果一条轴线排不下，换行。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*容器属性*/
                    flex-wrap: nowrap;/*（默认）：不换行。*/
                    flex-wrap: wrap;/*换行，第一行在上方。*/
                    flex-wrap: wrap-reverse;/*换行，第一行在下方。*/
                    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
                }
            </script>
            <style media="screen">
                .box21{width:110px;height: 100px;border: 1px solid #c3c3c3;flex-wrap: nowrap;-webkit-flex-wrap: nowrap;}
                .box22{width:110px;height: 100px;border: 1px solid #c3c3c3;flex-wrap: wrap;-webkit-flex-wrap: wrap;}
                .box23{width:110px;height: 100px;border: 1px solid #c3c3c3;flex-wrap: wrap-reverse;-webkit-flex-wrap: wrap-reverse;}
            </style>
            <div class="row">
                <div class="col-sm-4">
                    <div class="box box21">
                        <div class="item red"></div>
                        <div class="item yellow"></div>
                        <div class="item blue"></div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box box22">
                        <div class="item red"></div>
                        <div class="item yellow"></div>
                        <div class="item blue"></div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box box23">
                        <div class="item red"></div>
                        <div class="item yellow"></div>
                        <div class="item blue"></div>
                    </div>
                </div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*容器属性*/
                    flex-flow: <flex-direction> || <flex-wrap>;
                }
            </script>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>justify-content 属性定义了项目在主轴上的对齐方式。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*容器属性*/
                    justify-content: flex-start;/*（默认值）：左对齐*/
                    justify-content: flex-end;/*右对齐*/
                    justify-content: center;/*居中*/
                    justify-content: space-between;/*两端对齐，项目之间的间隔都相等。*/
                    justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
                    -webkit-justify-content: space-around; /* Safari 6.1+ */
                }
            </script>
            <style media="screen">
                .box31{justify-content: flex-start;}
                .box32{justify-content: flex-end;}
                .box33{justify-content: center;}
                .box34{justify-content: space-between;}
                .box35{justify-content: space-around;}
            </style>
            <div class="box box31">
                <div class="item red"></div>
                <div class="item blue"></div>
                <div class="item yellow" style="width:100px"></div>
                <div class="item red"></div>
                <div class="item blue"></div>
            </div>
            <div class="box box32">
                <div class="item red"></div>
                <div class="item blue"></div>
                <div class="item yellow" style="width:100px"></div>
                <div class="item red"></div>
                <div class="item blue"></div>
            </div>
            <div class="box box33">
                <div class="item red"></div>
                <div class="item blue"></div>
                <div class="item yellow" style="width:100px"></div>
                <div class="item red"></div>
                <div class="item blue"></div>
            </div>
            <div class="box box34">
                <div class="item red"></div>
                <div class="item blue"></div>
                <div class="item yellow" style="width:100px"></div>
                <div class="item red"></div>
                <div class="item blue"></div>
            </div>
            <div class="box box35">
                <div class="item red"></div>
                <div class="item blue"></div>
                <div class="item yellow" style="width:100px"></div>
                <div class="item red"></div>
                <div class="item blue"></div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>align-items 属性定义项目在交叉轴上如何对齐。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*容器属性*/
                    align-items: flex-start;/*交叉轴的起点对齐。*/
                    align-items: flex-end;/*交叉轴的终点对齐。*/
                    align-items: center;/*交叉轴的中点对齐。*/
                    align-items: baseline;/*项目的第一行文字的基线对齐。*/
                    align-items: stretch;/*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
                    -webkit-align-items: center; /* Safari 7.0+ */
                }
            </script>
            <style media="screen">
                .box41{align-items: flex-start;}
                .box42{align-items: flex-end;}
                .box43{align-items: center;}
                .box44{align-items: stretch;height:100px}
            </style>
            <div class="row">
                <div class="col-sm-3 box box41">
                    <div class="item red"></div>
                    <div class="item yellow" style="height:100px"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box42">
                    <div class="item red"></div>
                    <div class="item yellow" style="height:100px"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box43">
                    <div class="item red"></div>
                    <div class="item yellow" style="height:100px"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-3 box box44">
                    <div class="item red" style="height:auto"></div>
                    <div class="item yellow" style="height:auto"></div>
                    <div class="item blue" style="height:auto"></div>
                </div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*先决条件*/
                    flex-wrap: wrap;
                    -webkit-flex-wrap: wrap;
                    /*容器属性*/
                    align-content: flex-start;/*与交叉轴的起点对齐。*/
                    align-content: flex-end;/*与交叉轴的终点对齐。*/
                    align-content: center;/*与交叉轴的中点对齐。*/
                    align-content: space-between;/*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
                    align-content: space-around;/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
                    align-content: stretch;/*（默认值）：轴线占满整个交叉轴。*/
                    -webkit-align-content: center; /* Safari 7.0+ */
                }
            </script>
            <style media="screen">
                .box51{align-content: flex-start;flex-wrap: wrap;height:200px}
                .box52{align-content: flex-end;flex-wrap: wrap;height:200px}
                .box53{align-content: center;flex-wrap: wrap;height:200px}
                .box54{align-content: space-between;flex-wrap: wrap;height:200px}
                .box55{align-content: space-around;flex-wrap: wrap;height:200px}
                .box56{align-content: stretch;flex-wrap: wrap;height:200px}
            </style>
            <div class="row">
                <div class="col-sm-2 box box51">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-2 box box52">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-2 box box53">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-2 box box54">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-2 box box55">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
                <div class="col-sm-2 box box56">
                    <div class="item red"></div>
                    <div class="item yellow"></div>
                    <div class="item blue"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    order: <integer>;
                    -webkit-order: <integer>; /* Safari 7.0+ */
                }
            </script>
            <div class="box box21">
                <div class="item red" style="order:3"></div>
                <div class="item yellow" style="order:1"></div>
                <div class="item blue" style="order:2"></div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
                <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。</p>
                <p>如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    flex-grow: <integer>; /* default 0 */
                    -webkit-flex-grow: <integer>; /* Safari 7.0+ */
                }
            </script>
            <div class="box box21">
                <div class="item red" style="flex-grow:1"></div>
                <div class="item yellow" style="flex-grow:1"></div>
                <div class="item blue" style="flex-grow:1"></div>
            </div>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
                <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。</p>
                <p>如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    flex-shrink: <integer>; /* default 1 */
                    -webkit-flex-shrink: <integer>; /* Safari 7.0+ */
                }
            </script>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。</p>
                <p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    flex-basis: <length> | auto; /* default auto */
                    -webkit-flex-basis: <length> | auto; /* Safari 7.0+ */
                }
            </script>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>
                <p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
                    -webkit-flex: auto; /* Safari 7.0+ */
                }
            </script>
            <!--------------------------------------------------------------------->
            <article class="docs-content">
                <p>align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。</p>
                <p>默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
            </article>
            <script type="text/xianjs" ui-bs>
                .box {
                    /*项目属性*/
                    align-self: auto | flex-start | flex-end | center | baseline | stretch;
                }
            </script>
            <div class="box box41" style="height:100px">
                <div class="item red"></div>
                <div class="item yellow" style="align-self:flex-end"></div>
                <div class="item blue"></div>
            </div>
        </div>
    </div>
</div>
